import React, { useContext ,useEffect ,useMemo,useState } from 'react';
import { HashRouter as Router, Route, Link } from 'react-router-dom'
import {myContext}  from './index'
import store from '../store'


function Navheader() {
    const routeConfig = useContext(myContext);//接受传值
    const [state] = useState(store.getState());
    
    // 两种优化组件性能的方法
    // 解决多条数据变化 组件重复渲染问题
    useMemo(()=>{},[])
    // onClick={useCallback(()=>{},[])}
    useEffect(()=>{

    },[])

    return (
        <Router>
            <header className="App-header">
            {
                routeConfig.map((item) => {
                    return (
                        <div key={item.id} className={item.id === 0?"App-header-logo":''} >
                            <Link to={item.path} style={{color:state.NavIndex === item.id?'white':''}}>
                                {item.id === 0?<img src={item.url} alt={item.title} />:<span>{item.title}</span>}
                            </Link>
                        </div>
                    )
                })
            }
            </header>
            {
              routeConfig.map((item, index) => {
                return (
                  <Route key={index} path={item.path} exact={item.exact} component={item.component} />
                )
              })
            }
        </Router>
    )
}

export default Navheader;